<template>
  <div>
    <dept-edit ref="deptEdit" v-on:save-finished="searchSetmeal"></dept-edit>
    <el-row class="search-row">
        <el-col :span="12">
          <el-input
            placeholder="名称"
            v-model="search.queryString"
            style="width: 300px"
            class="filter-item"
            @keyup.enter.native="handleFilter">
          <el-button slot="append" icon="el-icon-search" @click="searchSetmeal()"></el-button>
        </el-input>
      </el-col>
      <!-- <el-col :span="12">
        性别：<el-select v-model="search.value">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col> -->
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <template v-for="(setmeal,i) in Setmeal">
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" style="height:285px">
              <img height="200px" :src=setmeal.img class="image">
              <div style="padding: 14px;">
                <span>{{ setmeal.name }}</span>
                <div class="bottom clearfix">
                  <time class="time">适用性别：<span style="color:red">{{ setmeal.sex == "0" ? "不限" : setmeal.sex == "1" ? "男" : "女" }}</span></time>
                  <time class="time">适用年龄：<span style="color:red">{{ setmeal.age }}</span></time>
                  <time class="time">价格：<span style="color:red">{{ setmeal.price }}</span></time>
                  <el-button type="text" class="button" @click="yy(setmeal.id)">预约</el-button>
                  <el-button type="text" class="button" @click="selectId(setmeal)" style="padding:0 20px 0 0">查看详情</el-button>
                </div>
            </div>
          </el-card>
        </el-col>
      </template>
    </el-row>
    <el-divider></el-divider>
    <div class="pagination-container">
      <el-pagination
        background     
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[4, 8, 12]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { listAllSetmeal, listSetmeal } from "@/api/setmeal";
import DeptEdit from '@/components/nd/deptEdit'

export default {
  data() {
    return {
      total: 0,
      Setmeal:{},
      search: {
        pageSize: 4,
        pageNum: 1,
        queryString: "",
        // value:'0',
      },
      //  options: [{
      //     value: '0',
      //     label: '不限'
      //   }, {
      //     value: '1',
      //     label: '男'
      //   }, {
      //     value: '2',
      //     label: '女'
      //   }],
    }
  },
  methods: {
    selectId(i){
      console.log(i)
      this.$router.push({
        path: '/setmealdetails',
        query: {
          data: i.id
        }
      })
    },
    searchSetmeal() {
      this.loading = true;
      listSetmeal(this.search)
        .then((response) => {
          console.log(response);
          this.Setmeal = response.data.list;
          this.total = response.data.total;
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    //每页条数改变方法
    handleSizeChange(val) {
      this.search.pageSize = val;
      this.searchSetmeal();
    },
    //当前页改变方法
    handleCurrentChange(val) {
      this.search.pageNum = val;
      this.searchSetmeal();
    },
    //编辑按钮
    async yy(index) {
      console.log(index)
      this.$refs.deptEdit.$emit('openEditDeptDialog',index)
    },
    //错误信息
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  components: { DeptEdit },
  created() {
    this.searchSetmeal()
  }
};

</script>

<style>

</style>